<template>
  <div>
    <div class="top-tool">
      <div v-if="dialogType !== 'detail'">
        <el-button
          type="success"
          plain
          size="mini"
          icon="el-icon-plus"
          class="common-addBtn"
          @click="handleAddborder"
          >关联代表</el-button
        >
        <el-button
          :disabled="deleteBorderIds.length === 0"
          type="danger"
          plain
          size="mini"
          icon="el-icon-delete"
          class="common-addBtn"
          @click="handleRemoveBorder"
          >移除</el-button
        >
      </div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        label-position="right"
        :inline="true"
        size="mini"
        label-width="68px"
      >
        <el-form-item label="边民姓名" prop="borderName">
          <el-input
            v-model="queryParams.borderName"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <basic-table
      ref="tableList"
      class="borderTable"
      :columns="columns"
      :tableData="tableData"
      :total="selectList.length"
      :pageSize="pageParams.pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :needCheckbox="true"
      @selectionChange="selectionChange"
      :emptySmall="true"
    >
      <template #idCardNo="scope">
        <span>{{scope.row.idCardNo || scope.row.declareCiphertextIdno}}</span>
      </template>
    </basic-table>

    <!-- 选择边民组件 -->
    <el-drawer
      title="勾选关联边民"
      :visible.sync="showDrawer"
      :size="700"
      :modal="true"
      direction="rtl"
      append-to-body
    >
      <basic-table
        ref="tableList2"
        class="borderTable"
        :columns="columns2"
        :tableData="tableData2"
        :total="optionList.length"
        :pageSize="pageParams2.pageSize"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
        :needCheckbox="true"
        @selectionChange="selectionChange2"
        :emptySmall="true"
      ></basic-table>
      <el-button class="filter-item filter-item2" type="success" icon="el-icon-check" @click="sureBorder" size="small">
        确定
      </el-button>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    optionList: {
      type: Array,
      default: () => []
    },
    checkedRepreList: {
      type: Array,
      default: () => []
    },
    dialogType: {
      default: String,
      default: "add"
    }
  },
  data() {
    return {
      columns: [
        {
          prop: "borderPutrecNo",
          label: "边民备案编号",
          align: "center",
        },
        {
          prop: "declareName",
          label: "边民姓名",
          align: "center",
        },
        {
          prop: "idCardNo",
          label: "边民证件号",
          align: "center",
          slot: true
        },
        {
          prop: "declareTel",
          label: "电话号码",
          align: "center",
        },
      ],
      columns2: [
        {
          prop: "borderPutrecNo",
          label: "边民备案编号",
          align: "center",
        },
        {
          prop: "borderName",
          label: "边民姓名",
          align: "center",
        },
        {
          prop: "idCardNo",
          label: "边民证件号",
          align: "center",
        },
        {
          prop: "borderAddr",
          label: "户籍地址",
          minWidth: 120,
        },
        {
          prop: "borderTel",
          label: "电话号码",
          align: "center",
        },
      ],
      pageParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      queryParams: {
        borderName: null,
      },
      deleteBorderIds: [],
      selectList: [],
      showDrawer: false,
      pageParams2: {
        pageNum: 1,
        pageSize: 10,
      },
      selectList2: [],  //预勾选的代表
    }
  },
  watch: {
    checkedRepreList: {
      immediate: true,
      handler(val) {
        this.selectList = val;
      }
    }
  },
  computed: {
    tableData() {
      let arr = this.selectList;
      if (this.queryParams.borderName) {
        arr = this.selectList.filter(
          (item) => item.declareName.includes(this.queryParams.borderName)
        );
      }
      const start = (this.pageParams.pageNum - 1) * this.pageParams.pageSize;
      const end = this.pageParams.pageNum * this.pageParams.pageSize;
      return arr.slice(start, end);
    },
    tableData2() {
      const start = (this.pageParams2.pageNum - 1) * this.pageParams2.pageSize;
      const end = this.pageParams2.pageNum * this.pageParams2.pageSize;
      return this.optionList.slice(start, end);
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageParams.pageSize = val.pageSize;
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val.currentPage;
    },
    selectionChange(val) {
      this.deleteBorderIds = val.map((item) => item.borderPutrecNo);
    },
    handleAddborder() {
      this.showDrawer = true;
    },
    // 移除已添加的边民
    handleRemoveBorder() {
      this.selectList = this.selectList.filter(
        (item) => !this.deleteBorderIds.includes(item.borderPutrecNo)
      );
      this.$emit("handleCheckedRepre", this.selectList);
      //计算删除后当前页是否需要前移
      let totalPage = Math.ceil(
        this.selectList.length / this.pageParams.pageSize
      );
      if (this.pageParams.pageNum > 1 && this.pageParams.pageNum > totalPage) {
        this.pageParams.pageNum -= 1;
      }
    },
    handleSizeChange2(val) {
      this.pageParams2.pageSize = val.pageSize;
    },
    handleCurrentChange2(val) {
      this.pageParams2.pageNum = val.currentPage;
    },
    selectionChange2(val) {
      this.selectList2 = val.map(item => {
        return {
          borderPutrecNo: item.borderPutrecNo,
          declareName: item.borderName,
          declareTel: item.borderTel,
          idCardNo: item.idCardNo
        }
      });
    },
    sureBorder() {
      this.selectList = this.selectList.concat(this.selectList2);
      this.$emit("handleCheckedRepre", this.selectList);
      this.$refs.tableList2.$refs.table.clearSelection();
      this.showDrawer = false;

    }
  }
};
</script>

<style lang="scss" scoped>
.top-tool {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.borderTable {
  ::v-deep .el-table {
    td {
      padding: 3px 0;
    }
  }
}
</style>
